<template>
  <el-card :bordered="false" class="goods_list_add">
    <el-page-header
      @back="$router.go(-1)"
      style="margin-bottom: 10px"
    ></el-page-header>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      :labelWidth="labelWidth"
      class="demo-ruleForm"
    >
      <!-- 基本信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">基本信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="商品名称：" prop="goodsName">
              <el-input
                v-model="ruleForm.goodsName"
                placeholder="请输入商品名称，不超过30个字符"
                :disabled="disabled"
                style="width: 30%"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品条码：" prop="barCode">
              <el-input
                v-model="ruleForm.barCode"
                placeholder="请输入商品条码"
                style="width: 30%"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品图片：">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="true"
                :before-upload="beforeUpload"
                :on-change="handleChange"
                :file-list="fileList"
                :limit="6"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="tip" class="el-upload__tip">
                  建议上传大小不超过1M，尺寸为200 * 200的图片，最多6张图
                </div>
                <div slot="file" slot-scope="{ file }">
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      class="el-upload-list__item-delete"
                      @click="delUplod(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                    <span class="swzt">
                      <el-button
                        type="text"
                        icon="el-icon-set-up"
                        v-if="fileList[0] != file"
                        @click="setMaster(file)"
                        >设为主图</el-button
                      >
                      <span v-else>主图</span>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt />
              </el-dialog>
              <!-- modal -->
              <cropper-modal
                ref="cropperModal"
                :optionsData="optionsData"
                @ok="handleCropperSuccess"
              ></cropper-modal>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品描述：" prop="goodsDes">
              <el-input
                v-model="ruleForm.goodsDes"
                placeholder="请输入商品描述，不超过300个字"
                type="textarea"
                maxlength="300"
                :autosize="{ minRows: 4, maxRows: 6 }"
                show-word-limit
                style="width: 30%"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="库存单位：" prop="stockUnit">
              <el-select
                v-model="ruleForm.stockUnit"
                placeholder="请选择库存单位"
                style="width: 30%"
              >
                <el-option
                  :value="item.label"
                  v-for="(item, index) in stockUnitList"
                  :key="index"
                  :disabled="disabled"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>
      <!-- 销售信息 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">销售信息</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="所需积分：" prop="exchangeNum">
              <el-input
                placeholder="请输入大于0的整数"
                v-model="ruleForm.exchangeNum"
                type="number"
                :min="0"
                :disabled="disabled"
                class="cbjandxsj"
                style="width: 30%"
                @blur="toDecimalBlur('xsj')"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="库存数量：" prop="stockNum">
              <el-input
                v-model="ruleForm.stockNum"
                placeholder="请输入大于0的整数"
                :min="0"
                type="number"
                @blur="toDecimalBlur('kcsl')"
                style="width: 30%"
                :disabled="disabled"
              />
              <!-- <span v-else>已售罄</span> -->
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="成本价：" prop="costPrice">
              <el-input
                v-model="ruleForm.costPrice"
                type="number"
                :min="0"
                :disabled="disabled"
                placeholder="请输入成本价"
                class="cbjandxsj"
                style="width: 30%"
                @blur="toDecimalBlur('cbj')"
              ></el-input
              >元
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 商品详情 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">商品详情</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="商品详情：" prop="goodsDetails">
              <QuillEditor
                :value="ruleForm.goodsDetails"
                :myQuillEditor="'myQuillEditor'"
                @editorChange="editorChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <!-- 兑换规则 -->
      <com-title :styleIng="{ margin: '10px 0px 10px 10px' }" :isShow="false">
        <span slot="title">兑换规则</span>
        <el-row :gutter="10" slot="table">
          <el-col :xs="8">
            <el-form-item label="可兑换渠道：" prop="exchangeScope">
              <el-radio-group
                v-model="ruleForm.exchangeScope"
                :disabled="disabled"
                @change="exchangeScopeChange"
              >
                <el-radio label="00">全部渠道</el-radio>
                <el-radio label="01">仅线下</el-radio>
                <el-radio label="02">仅线上</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="选择门店：" prop="shopId">
              <el-select
                v-model="ruleForm.shopId"
                multiple
                placeholder="请选择选择门店"
                :disabled="disabled"
                style="width: 80%"
                @change="$forceUpdate()"
                @remove-tag="removeTag"
              >
                <el-option
                  :value="item.value"
                  v-for="(item, index) in mendianList"
                  :key="index"
                  :label="item.label"
                  :disabled="
                    oldShop.some((ele) => {
                      return ele == item.value;
                    })
                  "
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="用户兑换限制：" prop="userExchUnit">
              <el-col :span="3">
                <el-form-item>
                  <el-select
                    v-model="ruleForm.userExchUnit"
                    style="width: 100%"
                  >
                    <el-option label="每天" value="01"></el-option>
                    <el-option label="每月" value="02"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item>
                  <el-input
                    v-model="ruleForm.userExchLimit"
                    placeholder="每个用户最多可兑换"
                    style="width: 30%"
                    :disabled="disabled"
                  >
                    <template slot="append">次</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品兑换限制：" prop="goodsExchUnit">
              <el-col :span="3">
                <el-form-item>
                  <el-select
                    v-model="ruleForm.goodsExchUnit"
                    style="width: 100%"
                  >
                    <el-option label="每天" value="01"></el-option>
                    <el-option label="每月" value="02"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="18">
                <el-form-item>
                  <el-input
                    v-model="ruleForm.goodsExchLimit"
                    placeholder="该商品最多可兑换"
                    :disabled="disabled"
                    style="width: 30%"
                  >
                    <template slot="append">个</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="兑换日期限制：">
              <el-date-picker
                v-model="ruleForm.cxsj"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 35%"
                @change="cxsjChange"
                :default-time="['00:00:00', '23:59:59']"
                >></el-date-picker
              >
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="兑换人群限制：">
              <el-col :span="24">
                <el-form-item>
                  <el-radio-group
                    v-model="ruleForm.iszdHuiYuan"
                    :disabled="disabled"
                    @change="$forceUpdate()"
                  >
                    <el-radio label="00">全部会员</el-radio>
                    <el-radio label="01">指定会员</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="ruleForm.iszdHuiYuan == '01'">
                <el-form-item>
                  <el-checkbox-group
                    v-model="ruleForm.iszdHuiYuanList"
                    :disabled="disabled"
                    @change="$forceUpdate()"
                  >
                    <el-checkbox
                      :label="item.value"
                      name="type"
                      v-for="item in zdhyList"
                      :key="item.value"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :xs="8">
            <el-form-item label="商品状态：" prop="shelfState">
              <el-radio-group
                v-model="ruleForm.shelfState"
                :disabled="disabled"
              >
                <el-radio label="00">下架</el-radio>
                <el-radio label="01">上架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </com-title>

      <div class="content">
        <el-button
          type="primary"
          @click="submitSave('ruleForm')"
          v-if="!this.$route.query.id"
          >提交并保存</el-button
        >
        <el-button type="primary" @click="upDate('ruleForm')" v-else
          >修改并保存</el-button
        >
        <!-- <el-button @click="save('ruleForm')">保存</el-button> -->
        <el-button @click="quxiao('ruleForm')">取消</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script src='./index.js'></script>

<style lang="scss">
.goods_list_add {
  .cbjandxsj {
    width: 100%;
    .el-input__inner {
      text-align: left;
    }
  }
  .swzt {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    font-size: 16px;
  }
  .content {
    text-align: center;
    margin: 20px 0px;
    button {
      margin-right: 10px;
    }
  }
}
</style>
